<template>
	<div class="filter_item">
		<div class="label">{{ label }}</div>
		<div class="cont">
			<dl :style="{ height: cateHeight }">
				<dt :class="{ active: checked == 0 }" @click="handleCheckedFilter('0')">全部</dt>
				<dd v-for="(item, index) in data" :key="index" :class="{ active: checked === item.value }" @click="handleCheckedFilter(item.value)">{{ item.label }}</dd>
			</dl>
			<el-button type="text" @click="handleUnfoldFewer" v-if="isShow">
				{{ cateHeight === '38px' ? '展开' : '收起' }}
				<i :class="cateHeight === '38px' ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
			</el-button>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		label: String,
		type: String,
		data: Array
	},
	data() {
		return {
			checked: '0',
			isShow: false,
			cateHeight: '38px'
		};
	},
	watch: {
		data(arr) {
			let div = document.createElement('div');
			arr.forEach(item => {
				let span = document.createElement('span');
				div.appendChild(span);
				span.innerText = item.label;
			});
			document.body.appendChild(div);
			this.$nextTick(() => {
				if (div.clientHeight > 28) {
					this.isShow = true;
				}
				div.remove();
			});
		}
	},
	mounted() {},
	methods: {
		handleCheckedFilter(val) {
			this.checked = val;
			this.$emit('checked', this.type, val);
		},

		//展开收起
		handleUnfoldFewer() {
			if (this.cateHeight === '38px') {
				this.cateHeight = 'auto';
			} else {
				this.cateHeight = '38px';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.filter_item {
	display: flex;
	align-items: flex-start;
	padding: 15px 0 0;
	line-height: 28px;
	.label {
		font-size: 16px;
		font-weight: bold;
		margin-right: 20px;
		flex-shrink: 0;
	}
	.cont {
		flex: 1;
		display: flex;
		align-items: flex-start;
		padding-bottom: 5px;
		border-bottom: solid 1px #dcdfe6;
		overflow: hidden;
		dl {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
		}
		dt,
		dd {
			padding: 0 15px;
			margin: 0 10px 10px 0;
			user-select: none;
			cursor: pointer;
		}
		dt.active,
		dd.active,
		dt:hover,
		dd:hover {
			border-radius: 14px;
			color: var(--primary-active);
			background-color: var(--primary-background-hover);
		}
		.el-button {
			flex-shrink: 0;
			padding: 6px 0;
		}
	}
	&:last-child .cont {
		border-bottom: none;
	}
}
</style>
